<template>
    <div class="fixed-sidebar">
        <div class="sidebar-top">
            <img class="avatar" src="https://xuantu.renderbus.com/_next/static/media/consultant.a3233621.webp" alt="" />
            <button class="consult-btn">专属顾问</button>
        </div>
        <div class="sidebar-menu">
            <div class="menu-item menu-item-popup">
                <div class="icon icon-welfare"></div>
                <div class="label">新人福利</div>
                <div class="popup-box-welfare">
                    <div class="welfare-title">
                        微信扫码咨询 领取新客大礼包
                    </div>
                    <div class="dynamic-img">
                        <img src="https://image.lutongjiakao.com/system/7b3a56c9e6e94b4293dd02b0db368ee5.gif" alt="">
                    </div>
                </div>
            </div>
            <div class="menu-item menu-item-popup">
                <div class="icon icon-price"></div>
                <div class="label">咨询电话</div>
                <div class="popup-box phone-popup">
                    <div class="popup-content">
                        <img class="popup-icon"
                            src="https://image.lutongjiakao.com/system/69ba311467d04817a006abf029d5e80a.png" alt="" />
                        <div class="popup-title">咨询电话</div>
                        <div class="popup-phone">134-7688-3427</div>
                        <div class="popup-desc">周一到周天 8:00-21:00</div>
                    </div>
                </div>
            </div>
            <div class="menu-item menu-item-popup">
                <div class="icon icon-phone"></div>
                <div class="label">微信咨询</div>
                <div class="popup-box wechat-popup">
                    <div class="popup-content">
                        <img class="popup-wechat-logo"
                            src="https://image.lutongjiakao.com/system/83b61c1366054820986fab16b1ce7640.png" alt="" />
                        <div class="popup-wechat-title">微信咨询</div>
                        <div class="popup-wechat-desc">添加获取完整报价和功能清单</div>
                        <img class="popup-wechat-qr"
                            src="https://image.lutongjiakao.com/system/ffa8ebce3f1e4d5b868d73d87854c426.png" alt="" />
                        <div class="popup-wechat-tip">微信扫码咨询</div>
                    </div>
                </div>
            </div>
            <div class="menu-item" @click="toSuggest">
                <div class="icon icon-tec"></div>
                <div class="label">建议反馈</div>
            </div>
            <div class="menu-item" @click="scrollToTop" v-if="isScrolled">
                <div class="icon icon-arrow"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'

const isScrolled = ref(false);

function handleScroll() {
    // 页面高度
    isScrolled.value = window.scrollY > window.innerHeight;
}

onMounted(() => {
    window.addEventListener('scroll', handleScroll);
    handleScroll();
});
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});

function scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
}
const toSuggest = () => {
    window.open('https://txc.qq.com/products/781430')
}
</script>

<style scoped lang="scss">
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.fixed-sidebar {
    position: fixed;
    bottom: rem(70);
    right: rem(5);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: rem(70);
    background: transparent;
    font-family: inherit;
    transition: box-shadow 0.2s, background 0.2s;
}

.fixed-sidebar.scrolled {
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.95);
    border-radius: rem(12);
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: rem(12);
}

.avatar {
    width: rem(45);
    height: rem(45);
    border-radius: 50%;
}

.consult-btn {
    background: rgb(37, 207, 107);
    color: #fff;
    border: none;
    border-radius: rem(4);
    padding: rem(4) rem(12);
    font-size: rem(11);
    cursor: pointer;
    margin-bottom: rem(4);
}

.sidebar-menu {
    background: #fff;
    border-radius: rem(8);
    box-shadow: 0 rem(2) rem(16) 0 rgba(0, 0, 0, 0.08);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: rem(10);
    padding: rem(5) rem(8);
}

.menu-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    font-size: rem(14);
    cursor: pointer;
    transition: background 0.2s;
    padding: rem(5) rem(5);

    &:hover {
        // background: #f5f7fa;
        background: rgb(219, 238, 228);
    }

    .icon {
        width: rem(20);
        height: rem(20);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: rem(5);
    }

    .label {
        font-size: rem(10);
    }
}

// 弹窗样式
.menu-item-popup {
    position: relative;

    &:hover .popup-box {
        opacity: 1;
        pointer-events: auto;
        // transform: translateY(0);
    }

    &:hover .popup-box-welfare {
        opacity: 1;
        pointer-events: auto;
    }
}

.popup-box {
    position: absolute;
    left: rem(-220);
    top: 50%;
    transform: translateY(-50%) translateY(10px);
    min-width: rem(200);
    background: #fff;
    border-radius: rem(20);
    box-shadow: 0 0 rem(30) 0 rgba(0, 0, 0, 0.08);
    padding: rem(24) rem(20) rem(20) rem(20);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popup-box-welfare {
    position: absolute;
    left: rem(-253);
    top: 50%;
    transform: translateY(-50%) translateY(10px);
    width: rem(233);
    height: rem(383);
    border-radius: rem(20);
    box-shadow: 0 0 rem(30) 0 rgba(0, 0, 0, 0.08);
    padding: rem(24) rem(20) rem(20) rem(20);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('https://image.lutongjiakao.com/system/e777ca486ba24e6aabe433664f3fcbd3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* 只显示背景图不透明部分，其余部分隐藏 */
    -webkit-mask-image: url('https://image.lutongjiakao.com/system/e777ca486ba24e6aabe433664f3fcbd3.png');
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url('https://image.lutongjiakao.com/system/e777ca486ba24e6aabe433664f3fcbd3.png');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}

.welfare-title {
    margin-top: rem(102);
    color: #fff;
    font-size: rem(10);
}

.dynamic-img {
    width: rem(233);
    height: rem(58);
    margin-top: rem(185);

    img {
        width: 100%;
        height: 100%;
    }
}

// 电话弹窗内容
.phone-popup .popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: rem(4);
}

.popup-icon {
    width: rem(30);
    height: rem(30);
}

.popup-title {
    font-size: rem(16);
    font-weight: bold;
    color: #222;
}

.popup-desc {
    font-size: rem(11);
    color: #888;
}

.popup-phone {
    font-size: rem(18);
    color: #25cf6b;
    font-weight: bold;
    letter-spacing: 1px;
}

// 微信弹窗内容
.wechat-popup .popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: rem(8);
}

.popup-wechat-logo {
    width: rem(40);
    height: rem(35);
    border-radius: 50%;
}

.popup-wechat-title {
    font-size: rem(15);
    color: #222;
    font-weight: bold;
}

.popup-wechat-desc {
    font-size: rem(11);
    color: #888;
}

.popup-wechat-qr {
    width: rem(130);
    height: rem(130);
    border-radius: rem(8);
    background: #f5f7fa;
    object-fit: cover;
}

.popup-wechat-tip {
    font-size: rem(12);
    color: #888;
}

// 图标默认和hover图片地址
$welfare-normal: 'https://image.lutongjiakao.com/system/128531fc619a4f67b0cd5523c5fbeb45.png';
// $welfare-hover: 'https://image.lutongjiakao.com/system/06e8b9c6fd1c49318091b28d4bcaeb15.png';

$price-normal: 'https://image.lutongjiakao.com/system/3599eca450ee49df81fe73905894b0c7.png';
// $price-hover: 'https://xuantu.renderbus.com/_next/static/media/price_hover.2e2e2e2e.webp';

$phone-normal: 'https://image.lutongjiakao.com/system/94f03e644756480994ebd354a4973290.png';
// $phone-hover: 'https://xuantu.renderbus.com/_next/static/media/phone_hover.2e2e2e2e.webp';

$tec-normal: 'https://image.lutongjiakao.com/system/f161d37228da4ce49b2bb2ec27bc04e6.png';
// $tec-hover: 'https://xuantu.renderbus.com/_next/static/media/tec_hover.2e2e2e2e.webp';

$arrow-normal: 'https://xuantu.renderbus.com/_next/static/media/arrow.46412b6a.webp';
// $arrow-hover: 'https://xuantu.renderbus.com/_next/static/media/arrow_hover.2e2e2e2e.webp';

// welfare
.icon-welfare {
    background-image: url(#{$welfare-normal});
}

// .menu-item:hover .icon-welfare {
//     background-image: url(#{$welfare-hover});
// }

// price
.icon-price {
    background-image: url(#{$price-normal});
}

// .menu-item:hover .icon-price {
//     background-image: url(#{$price-hover});
// }

// phone
.icon-phone {
    background-image: url(#{$phone-normal});
}

// .menu-item:hover .icon-phone {
//     background-image: url(#{$phone-hover});
// }

// tec
.icon-tec {
    background-image: url(#{$tec-normal});
}

// .menu-item:hover .icon-tec {
//     background-image: url(#{$tec-hover});
// }

// arrow
.icon-arrow {
    background-image: url(#{$arrow-normal});
}

// .menu-item:hover .icon-arrow {
//     background-image: url(#{$arrow-hover});
// }</style>
